<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Galleria Flickr Plugin</title>
        <style>

            /* Demo styles */
            html,body{background:#222;margin:0;}
            body{border-top:4px solid #000;}
            .content{color:#777;font:12px/1.4 "helvetica neue",arial,sans-serif;width:620px;margin:20px auto;}
            h1{font-size:12px;font-weight:normal;color:#ddd;margin:0;}
            p{margin:0 0 20px}
            a {color:#22BCB9;text-decoration:none;}
            .cred{margin-top:20px;font-size:11px;}

            /* This rule is read by Galleria to define the gallery height: */
            #galleria{height:320px;}

        </style>

        <!-- load jQuery -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

        <!-- load Galleria -->
        <script src="../../galleria-1.2.8.min.js"></script>

        <!-- load flickr plugin -->
        <script src="galleria.flickr.min.js"></script>

    </head>
<body>
    <div class="content">
        <h1>Galleria Flickr Plugin Demo</h1>
        <p>Demonstrating a basic gallery example with a Flickr search.</p>

        <!-- Adding gallery images. This is just a container for the dynamic flickr images -->

        <div id="galleria"></div>

        <p class="cred">Made by <a href="http://galleria.aino.se">Galleria</a>.</p>
    </div>
    <script>

    // Load the classic theme
    Galleria.loadTheme('../../themes/classic/galleria.classic.min.js');

    // Initialize Galleria
    Galleria.run('#galleria', {
        flickr: 'search:cityscape',
        flickrOptions: {
            sort: 'interestingness-desc'
        }
    });
    </script>
    </body>
</html>